<p class="upload_buttons">
    <button type="button" class="btn btn-outline-primary" (click)="isCollapsed_file = !isCollapsed_file; isCollapsed_link = false;"
            [attr.aria-expanded]="!isCollapsed_file" aria-controls="collapseExample">
        上传文件
    </button>
    <button type="button" class="btn btn-outline-primary" (click)="isCollapsed_link = !isCollapsed_link; isCollapsed_file = false;"
            [attr.aria-expanded]="!isCollapsed_link" aria-controls="collapseExample">
        上传链接
    </button>
</p>
<div class="upload_card" [ngbCollapse]="!isCollapsed_file">
    <div class="card">
        <div class="card-body">
            <div class="row">

                <div class="col-md-3">

                    <h3>选择文件</h3>

                    <div ng2FileDrop
                         [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                         (fileOver)="fileOverBase($event)"
                         [uploader]="uploader"
                         class="my-drop-zone">
                        拖拽文件到此处上传
                    </div>

                    <!--Multiple-->
                    <!--<input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>-->

                    <!--Single-->
                    <!--<input type="file" ng2FileSelect [uploader]="uploader" />-->
                </div>

                <div class="col-md-9" style="margin-bottom: 40px">

                    <h3>上传文件列表</h3>
                    <p>文件数量: {{ uploader.queue.length }}</p>

                    <table class="table">
                        <thead>
                        <tr>
                            <th width="30%">文件名</th>
                            <th>大小</th>
                            <th width="20%">进度</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let item of uploader.queue">
                            <td><strong>{{ item.file.name }}</strong></td>
                            <td *ngIf="uploader.options.isHTML5" nowrap>{{ item.file.size/1024/1024 | number:'.2' }} MB</td>
                            <td *ngIf="uploader.options.isHTML5">
                                <div class="progress" style="margin-bottom: 0;">
                                    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                                </div>
                            </td>
                            <td class="text-center">
                                <span *ngIf="item.isSuccess">上传成功</span>
                                <span *ngIf="item.isCancel">已取消</span>
                                <span *ngIf="item.isError">错误</span>
                            </td>
                            <td nowrap>
                                <button style="margin-right: 5px;"
                                        type="button"
                                        class="btn btn-success btn-sm"
                                        (click)="item.upload()"
                                        [disabled]="item.isReady || item.isUploading || item.isSuccess">
                                    上传
                                </button>
                                <button type="button"
                                        class="btn btn-danger btn-sm"
                                        (click)="item.remove()">
                                    删除
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <div id="upload_bottom">
                        <div>
                            文件队伍进度:
                            <div class="progress" id="progressBar">
                                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                            </div>
                        </div>
                        <button style="margin-right: 5px;"
                                class="btn btn-success btn-sm"
                                (click)="uploader.uploadAll()"
                                [disabled]="!uploader.getNotUploadedItems().length">
                            上传所有文件
                        </button>
                        <button class="btn btn-danger btn-sm"
                                (click)="uploader.clearQueue()"
                                [disabled]="!uploader.queue.length">
                            删除所有文件
                        </button>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<div class="upload_card" [ngbCollapse]="!isCollapsed_link">
    <div class="card">
        <div class="card-body">
          <div class="uploadLink">
            <form>
              <div class="formItem">
                <label>输入链接：</label>
                <input size="60" type="text" required name="link" [(ngModel)]="link_address" #link="ngModel" style="margin-right: 20px;">
                <button class="btn btn-outline-dark" (click)="uploadLink()" [disabled]="(!link.valid)">上传</button>
              </div>
            </form>
          </div>
        </div>
    </div>
</div>



<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
    <ngb-panel title="链接资源">
        <ng-template ngbPanelContent>
          <div class="links">
            <ol>
              <li *ngFor="let link of link_addresses"><a href="{{link}}">{{link}}</a></li>
            </ol>
          </div>
        </ng-template>
    </ngb-panel>

    <ngb-panel title="文件资源">
        <ng-template ngbPanelContent>

            <ol>
                <li *ngFor="let material of material_names">
                    <a href="javascript:void(0)" (click)="download(material)"><b>{{material}}</b></a>
                    <hr>
                </li>
            </ol>
        </ng-template>
    </ngb-panel>

</ngb-accordion>
